<html>
 <head>
  <style type="text/css">
    .bar {
       color: white;
       margin-left:8px;
       font-family: Arial, sans-serif;
       font-size: 14px;
       font-style: normal;
       font-variant: normal;
       font-weight: normal;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="..//core/foam.css" />
  <script language="javascript" src="../core/bootFOAM.js"></script>
  <title>FOAM Test2</title>
 </head>
 <body>
  <script language="javascript">
    var models = [Model, Property];

    var tv1 = TableView.create({model: Model});
    tv1.objs = models;
    document.writeln(tv1.toHTML());
    tv1.init();

    var dv = DetailView.create({model: Model});
    document.writeln(dv.toHTML());
    dv.init();

    tv1.selection.addListener(function (src, property, oldValue, newValue) {
       if ( newValue )
          dv.set(tv1.selection.get().clone());
    });

    // Events.follow(tv1.selection, dv);
    // dv.setModel(tv1.selection);

    document.writeln(Model);
    document.writeln(Model.getPrototype());
    document.writeln(Model.getPrototype().create());

    var o = Model.create({ name: 'User', label: 'User' });

    document.writeln("ModelObj: " + o);
    document.writeln("Model: " + o.model_);
    document.writeln("Model.name: " + o.name_);

    document.writeln("</br><h2>Test Events</h2>");
    var l = function(obj, property, oldValue, newValue) {
       document.writeln("obj: " + obj + " property: " + property+ " oldValue: " + oldValue+ " newValue: " + newValue);
    }

    var pm = o.propertyValue('name');
    document.writeln(pm + " val: " + pm.get());
//    pm.addListener(function() {document.writeln("name updated via property model")});

    // o.addListener(l);
    // o.addPropertyListener('name', l);
    // o.addPropertyListener('label',l);

    pm.set("foo");
    pm.set("bar");

    o.name = 'Group';
    o.label = 'Group'

//     l("foo","bar","old", "new");

    o.globalChange();

    document.writeln(o);

    var sm = SimpleValue.create("foo");
    sm.addPropertyListener(l);

    document.writeln(sm.get());
    sm.set("bar");
    document.writeln(sm.get());

    document.writeln("</br><h2>Test New Events</h2>");
    var e = { __proto__: PropertyChangeSupport };

    e.subscribe(['property','lname'], l);
    e.subscribe(['property','age'], l);
    e.subscribe(['property'], function (source,topic) { document.writeln("property: " + topic); });
    e.subscribe([], function (source,topic) { document.writeln("global: " + topic); });
    e.subscribe([], e.oneTime(function (source,topic) { document.writeln("one-time: " + topic); }));

//    document.writeln("subs: " + e.publishAsync(['property','age'], "************async***********", "*********async********"));
    document.writeln("subs: " + e.publish(['property','age'], "old", "new"));
    document.writeln("subs: " + e.publish(['property','lname'], "old", "new"));
    document.writeln("subs: " + e.publish(['property','company'], "old", "new"));
    document.writeln("subs: " + e.publish(['on','focus'], "old", "new"));

    e.publish(['property','*'], "old", "new");
    e.publish(['property','*'], "old", "new");

    e.propertyChange('age', 10, 11);

      /*
    e.subscribe(['test'], function (source,topic) { document.writeln("normal: " + topic); });
    e.subscribe(['test'], e.async(function (source,topic) { document.writeln("async: " + topic); }));
    e.subscribe(['test'], e.merged(function (source,topic) { document.writeln("merged: " + topic); }));

    e.publish(['test'], "foo", "bar");
    e.publish(['test'], "foo", "bar");
    e.publish(['test'], "foo", "bar");
    e.publish(['test'], "foo", "bar");
    e.publish(['test'], "foo", "bar");
    e.publish(['test'], "foo", "bar");

      */
    example = $('view');

    var v1 = TextFieldView.create();
    var v2 = TextFieldView.create();
    var v3 = ProgressView.create();

    document.writeln("<br/>");

    document.writeln(v1.toHTML());
    v1.init();

    document.writeln(v2.toHTML());
    v2.init();

    document.writeln(v3.toHTML());
    v3.init();

    v2.setValue(v1.value);
    v3.setValue(v1.value);

    document.writeln("<br/>subs: " + e.subs_);
  </script>
 </body>
</html>
